<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">售后详情</block>
		</cu-custom>
		<loading-view v-show="showLoading"></loading-view>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="index_d_a">
				<view class="after_sales_detail_a">退货地址</view>
				<view class="after_sales_detail_b">
					{{lists.shop && lists.shop.address}} {{lists.shop && lists.shop.contact}} {{lists.shop && lists.shop.mobile}}
					<span @tap="onCopy">复制</span>
				</view>
			</view>
			<view class="index_d_a">
				<view class="index_d_a_a">
					<custom-image :lazy-load="true" width="140rpx" height="140rpx" radius="0" lazy-load :src="goods.image"></custom-image>
				</view>
				<view class="index_d_a_b">
					<view class="index_d_a_b_a">{{goods.goods_name}}</view>
					<view class="index_d_a_b_b">
						<view class="index_d_a_b_b_a">规格：</view>
						<view class="index_d_a_b_b_c">{{goods.spec_value}}</view>
					</view>
					<view class="index_d_a_b_b">
						<view class="index_d_a_b_b_d">
							<view class="order_a_a_b_b_c_a" v-if="goods.integral==0 && goods.goods_price>0">
								<span>¥</span>{{goods.goods_price}}
							</view>
							<view class="order_a_a_b_b_c_a" v-if="goods.goods_price==0 && goods.integral>0">
								<span>积分</span>{{goods.integral}}
							</view>
							<view class="order_a_a_b_b_c_a" v-if="goods.goods_price>0 && goods.integral>0">
								<span>积分</span>{{goods.integral}}+<span>¥</span>{{goods.goods_price}}
							</view>
						</view>
						<view class="index_d_a_b_b_e">X{{goods.goods_num}}</view>
					</view>
				</view>
			</view>
			<view class="apply_refund_a">
				<view class="apply_refund_a_b">
					<view class="apply_refund_a_b_a">退款状态:</view>
					<view class="apply_refund_a_b_b">{{lists.status_text}}</view>
				</view>
				<view class="apply_refund_a_b">
					<view class="apply_refund_a_b_a">退款方式:</view>
					<view class="apply_refund_a_b_b">{{lists.refund_type == 0 ? '仅退款' : '退款退货'}}</view>
				</view>
				<view class="apply_refund_a_b">
					<view class="apply_refund_a_b_a">退款原因:</view>
					<view class="apply_refund_a_b_b">{{lists.refund_reason}}</view>
				</view>
				<view class="apply_refund_a_b">
					<view class="apply_refund_a_b_a">退款金额:</view>
					<view class="apply_refund_a_b_b">¥{{lists.refund_price}}</view>
				</view>
				<view class="apply_refund_a_b">
					<view class="apply_refund_a_b_a">退款编号:</view>
					<view class="apply_refund_a_b_b">{{lists.sn}}</view>
				</view>
				<view class="apply_refund_a_b">
					<view class="apply_refund_a_b_a">申请时间:</view>
					<view class="apply_refund_a_b_b">{{lists.create_time}}</view>
				</view>
				<view class="apply_refund_a_b" style="height: auto;" v-if="lists.refund_remark">
					<view class="apply_refund_a_b_a" style="width: 100%;float: none;">备注说明:</view>
					<view class="apply_refund_a_b_b" style="width: 100%;float: none;">{{lists.refund_remark}}</view>
				</view>
				<view class="apply_refund_a_b" style="height: auto;" v-if="lists.refund_image">
					<view class="apply_refund_a_b_a" style="width: 100%;float: none;">图片凭证:</view>
					<view class="apply_refund_a_b_b" style="height: 160rpx; float: none;">
						<custom-image mode="aspectFit" class="img-preview" radius="10rpx" :src="lists.refund_image" width="160rpx" height="160rpx" />
					</view>
				</view>
			</view>
		</view>
		<view style="width: 750rpx; height: 120rpx;"></view>
		<view class="user_money_log_b_c" v-if="lists.status==2">
			<view class="user_money_log_b_c_b" @click="goPage('/pages/input_express_info/input_express_info?id=' + lists.id)" style="background-color: #62469B;border:1rpx solid #62469B;color:#fff;">填写快递单号</view>
		</view>
		<view class="user_money_log_b_c" v-if="lists.status==1 || lists.status==4">
			<view class="user_money_log_b_c_b" @click="goRefund" style="background-color: #62469B;border:1rpx solid #62469B;color:#fff;">重新申请</view>
			<view class="user_money_log_b_c_b" @tap="showdialog_click()" style="background-color: #62469B;border:1rpx solid #62469B;color:#fff;">撤销申请</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import {
		copy
	} from "@/utils/type.js";
	export default {
		data() {
			return {
				showLoading:true,
				goods: {},
				reason: [],
				lists: {},
				copyContent: "",
				confirmDialog: false,
				uid:0
			};
		},
		components: {},
		props: {},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let {
				afterSaleId,
				order_id
			} = options;
			this.afterSaleId =afterSaleId;
			this.orderId = order_id;
			this.uid=uni.getStorageSync('uid');
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.afterSaleDetailFun();
		},
		methods: {
			showdialog_click(){
				let _this=this;
				uni.showModal({
					title: '提示',
					content: '您确认是否要撤销申请？',
					success: function (res) {
						if (res.confirm) {
							_this.showdialog_post();
						}
					}
				});
			},
			showdialog_post(){
				let paramsList = {
					uid:this.uid,
					id:this.afterSaleId
				}
				let optsList = {
					url: 'us-cancel',
					method: 'post'
				};
				uni.showLoading({
					title: '撤销中',
					mask: true
				})
				let _this=this;
				request.httpTokenRequest(optsList, paramsList).then(res => {
					uni.hideLoading();
					if(res.data.code == 200){
						_this.afterSaleDetailFun();
						uni.$emit("refreshsale")
					}else{
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration: 2000
						});
					}
				});
			},
			onCopy() {
				let {
					lists,
					copyContent
				} = this;
				let {
					address,
					contact,
					mobile
				} = lists.shop;
				copyContent = address + " " + contact + " " + mobile;
				copy(copyContent)
			},

			goRefund() {
				let {
					lists
				} = this;
				uni.navigateTo({
					url: '/pages/apply_refund/apply_refund?order_id=' + this.orderId + '&afterSaleId=' +
						this.afterSaleId + '&item_id=' + lists.order_goods.item_id
				});
			},

			afterSaleDetailFun() {
				let paramsList = {
					id: this.afterSaleId,
					uid:this.uid
				}
				let optsList = {
					url: 'us-detail',
					method: 'get'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						_this.lists = res.data.data;
						_this.goods=_this.lists.order_goods;
					}
					this.showLoading = false;
				});
			}
		}
	};
</script>
<style lang="scss">
	.user_money_log_b_c{
		height: 100rpx;
		width: 750rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		padding: 0 30rpx;
	}
	.user_money_log_b_c_b{
		width: 160rpx;
		height: 60rpx;
		background: #E71102;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		float: right;
		border: 2rpx solid #E71102;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.apply_refund_a{
		width: 710rpx;
		height: auto;
		border-radius: 20rpx;
		margin: auto;
		margin-top: 20rpx;
		padding:30rpx;
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 0.6);
	}
	.apply_refund_a_b{
		height: 60rpx;
		line-height: 60rpx;
	}
	.apply_refund_a_b_a{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		float: left;
		width: 150rpx;
	}
	.apply_refund_a_b_b{
		float: left;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
	}
	.after_sales_detail_a{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
	}
	.after_sales_detail_b{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		margin-top: 20rpx;
	}
	.after_sales_detail_b span{
		color: #FB2B18;
		margin-left: 20rpx;
	}
	.index_d_a{
		width: 710rpx;
		margin: auto;
		height:auto;
		overflow: hidden;
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 0.6);
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding:30rpx;
	}
	.index_d_a_a{
		width: 140rpx;
		height: 140rpx;
		border-radius: 15rpx;
		overflow: hidden;
		float: left;
	}
	.index_d_a_b{
		width:440rpx;
		margin-left: 30rpx;
		height: auto;
		float: left;
		position: relative;
	}
	.index_d_a_b_a{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		height: 40rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.index_d_a_b_b{
		margin-top: 10rpx;
		overflow: hidden;
	}
	.index_d_a_b_b_a{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		float: left;
		line-height: 42rpx;
	}
	.index_d_a_b_b_b{
		float: left;
	}
	.index_d_a_b_b_d{
		float: left;
		line-height: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FF6000;
	}
	.order_a_a_b_b_c_a{
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:#FB2B18;
	}
	.order_a_a_b_b_c_a span{
		font-size: 24rpx;
	}
	.index_d_a_b_b_e{
		float: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #CCCCCC;
		line-height: 50rpx;
	}
	.index_d_a_b_b_b_a{
		background: #FFFFFF;
		border: 1px solid #E5E5E5;
		border-radius: 5px;
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 10rpx;
		float: left;
		margin-left: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FA7428;
	}
	.index_d_a_b_b_c{
		float: left;
		margin-left: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		line-height: 42rpx;
	}
</style>
